<template>
  <view class="coup">
    <!-- 交易记录列表 -->
    <view class="transaction-list">
      <view
        v-for="(item, index) in transactionData"
        :key="index"
        class="transaction-item"
      >
        <view class="info-wrapper">
          <text class="description"
            >{{ types[item.type] }} {{ item.transferUserName }}</text
          >
          <text class="date">{{ item.createTime }}</text>
        </view>
        <text class="amount">{{ item.amount }}</text>
      </view>

      <view v-if="transactionData.length === 0" class="no-data">
        <IconFont
          font-class-name="iconfont"
          class-prefix="icon"
          name="meiyoushuju"
          size="40"
        />
        <text class="meiyoushuju">暂无数据</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import http from "@/utils/http";
import Taro, { useRouter } from "@tarojs/taro";
import { onMounted, ref } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
const router = useRouter();
const { type } = router.params;
console.log("type", type);
const transactionData = ref<any[]>([]);
const types = {
  "0": "抵消充值",
  "1": "转入",
  "2": "转出",
  "3": "网体",
  "4": "直推",
};

onMounted(() => {
  http
    .postQuery(`/api/user/getDeductionRecord`, { accountType: type })
    .then((res) => {
      console.log("res", res);
      transactionData.value = res.data.map((i) => i.columns);
      console.log("transactionData", transactionData.value);
    });
});
</script>

<style lang="scss">
.coup {
  background: #fff;
  min-height: 100vh;
  margin: auto;
  width: 700rpx;

  .transaction-list {
    width: 100%;
  }

  .transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    width: 100%;
  }

  .info-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-right: 20rpx;
  }

  .date {
    font-size: 24rpx;
    color: #999;
    line-height: 34rpx;
    margin-bottom: 8rpx;
  }

  .description {
    font-size: 32rpx;
    font-weight: 500;
  }

  .amount {
    font-size: 28rpx;
    font-weight: 500;
    color: #f00;
  }
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    min-height: 50vh;
  }
  .meiyoushuju {
    font-size: 28rpx;
    color: #999;
  }
}
</style>
